<template>
  <div class="view">
    <div class="container">
      <el-button @click="handleItemAdd" type="primary">新增</el-button>
    </div>
    <div class="container">
      <!--带筛选表格组件-->
      <table-list :data="listData" :column-cfg="columnCfg" :total-size="totalSize" :page-size="filterParams.pageSize"
        :loading="dataLoading" @refresh-list="getList" @show-detail="handleShowDetail" @edit-item="handleEditItem"
        @delete-item="handleDeleteItem">
      </table-list>
    </div>
    <!--  详情对话框  -->
    <item-detail ref="itemDetail" @data-change="getList"></item-detail>
  </div>
</template>

<script>
/**
 * 最基础的表格示例
 * 展示通过配置可以实现的功能
 */
import TableList from '@/components/TableList/index'
import ItemDetail from "./components/ItemDetail";

import { list, batchDelete } from "@/api/system/user";

import ListAction from '@/views/_mixins/list-action'

export default {
  name: 'TableDefault',
  mixins: [ListAction],
  components: {
    TableList,
    ItemDetail
  },
  props: {},
  data() {
    return {
      list: list,
      batchDelete: batchDelete,
      idLabel: 'userId',
      deleteTip: '此操作将永久删除该用户, 是否继续?',
      filterParams: { pageSize: 10 }, //筛选条件，每次更新会保存使用的筛选条件
      columnCfg: {
        'userName': {
          label: '登录名', width: '200',
          filter: { type: 'input', placeholder: '请输入登录名', hideLabel: true },
          link: { event: 'show-detail', type: 'primary' },
        },
        'realName': {
          label: '昵称', width: '200', class: 'bold', //自定义列css，需要是全局css
          filter: { label: '用户昵称', type: 'input', encode: true, placeholder: '中文查询需要url转码' }
        },
        'enable': {
          label: '用户状态', dictKey: 'data_status', tag: 'normal', width: '140', align: 'center',
          filter: { type: 'select' }
        },
        'createTime': {
          label: '创建时间', sortable: 'custom', style: { 'font-size': '12px' },
          filter: { type: 'date-picker', pickerType: 'daterange' }
        },
        'tel': {
          label: '手机号码', hidden: true, //筛选条件显示，列不显示
          filter: { type: 'input', placeholder: '查询手机号' }
        },
        ':action': {
          label: '操作',
          actionArr: [
            {
              label: '详情',
              event: "show-detail",
              btnType: ""
            },
            {
              label: '编辑',
              event: "edit-item",
              btnType: "warning"
            },
            {
              label: '删除',
              event: "delete-item",
              btnType: "danger"
            },
          ]
        },
      },
    }
  },
  computed: {},
  created() {
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
</style>
